<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语单词训练</title>
    <style>
        body {
            font-family: 'Comic Sans MS', cursive;
            background: linear-gradient(to bottom right, #ffe6f0, #e6ffe6);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
        }
        h1, h2 {
            text-align: center;
            color: #ff69b4;
        }
        .question {
            margin-bottom: 20px;
            text-align: left;
        }
        .question p {
            font-size: 18px;
            color: #333;
        }
        .options label {
            display: block;
            margin: 10px 0;
            font-size: 16px;
            color: #555;
        }
        .buttons {
            text-align: center;
            margin-top: 20px;
        }
        button {
            padding: 10px 20px;
            margin: 0 10px;
            border: none;
            border-radius: 10px;
            background-color: #ff69b4;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #ff1493;
        }
        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        #feedback {
            margin-top: 20px;
            text-align: center;
            font-size: 16px;
            color: #333;
        }
        #report {
            display: none;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container" id="quiz-container">
        <h1>英语单词训练</h1>
        <div id="question-container" class="question"></div>
        <div class="buttons">
            <button id="prev-btn" disabled>上一题</button>
            <button id="action-btn">提交</button>
        </div>
        <div id="feedback"></div>
    </div>
    <div id="report">
        <h2>答题报告</h2>
        <p id="single-correct"></p>
        <p id="single-incorrect"></p>
        <p id="multiple-correct"></p>
        <p id="multiple-incorrect"></p>
        <p id="incorrect-questions"></p>
    </div>

    <script>
        // 题目数据
        const questions = [
            { id: 1, text: "“weigh up”的意思", type: "single", options: ["A. 使烦恼，使焦虑", "B. 发表有分量的意见", "C. 认真考虑，权衡"], answer: ["C"] },
            { id: 2, text: "“consuming”的意思", type: "single", options: ["A. 强烈的，令人着迷的", "B. 消耗，消费", "C. 费事的，耗时间的"], answer: ["B"] },
            { id: 3, text: "“未达到，不符合”的英文", type: "single", options: ["A. fall short of sth.", "B. go short of", "C. run short of"], answer: ["A"] },
            { id: 4, text: "“thrive on sth”的意思", type: "single", options: ["A. 繁荣；蓬勃发展", "B. 以某事为乐，因某事而有成就", "C. 消耗，耗费"], answer: ["B"] },
            { id: 5, text: "“集体的；共有的”的英文", type: "single", options: ["A. collection", "B. collective", "C. collaboration"], answer: ["B"] },
            { id: 6, text: "“stimulus”的意思", type: "single", options: ["A. 促进因素，刺激", "B. 奋发图强", "C. 遏制因素"], answer: ["A"] },
            { id: 7, text: "“crop”的意思", type: "multiple", options: ["A. 庄稼，作物", "B. 一群人，一些事情", "C. 有收成；裁剪"], answer: ["A", "B", "C"] },
            { id: 8, text: "“大量的，充足的”的英文", type: "multiple", options: ["A. abundant", "B. shortage", "C. plentiful"], answer: ["A", "C"] }
        ];

        // 状态管理
        let currentQuestionIndex = 0;
        let userAnswers = Array(questions.length).fill([]); // 记录用户答案
        let submitted = Array(questions.length).fill(false); // 记录每题是否已提交
        let correctAnswers = Array(questions.length).fill(null); // 记录每题是否正确

        // DOM元素
        const questionContainer = document.getElementById("question-container");
        const prevBtn = document.getElementById("prev-btn");
        const actionBtn = document.getElementById("action-btn");
        const feedback = document.getElementById("feedback");
        const quizContainer = document.getElementById("quiz-container");
        const report = document.getElementById("report");

        // 显示题目
        function renderQuestion() {
            const q = questions[currentQuestionIndex];
            let html = `<p>${q.id}. ${q.text} (${q.type === "single" ? "单选题" : "多选题"})</p><div class="options">`;
            q.options.forEach((option, index) => {
                const optionLetter = String.fromCharCode(65 + index);
                html += `
                    <label>
                        <input type="${q.type === 'single' ? 'radio' : 'checkbox'}" 
                               name="q${q.id}" 
                               value="${optionLetter}" 
                               ${userAnswers[currentQuestionIndex].includes(optionLetter) ? 'checked' : ''}>
                        ${option}
                    </label>`;
            });
            html += "</div>";
            questionContainer.innerHTML = html;

            // 更新按钮文案和反馈
            if (submitted[currentQuestionIndex]) {
                actionBtn.textContent = "下一道";
                const isCorrect = correctAnswers[currentQuestionIndex];
                feedback.textContent = isCorrect ? "答对啦" : `答错啦，正确答案是 ${questions[currentQuestionIndex].answer.join(", ")}`;
            } else {
                actionBtn.textContent = "提交";
                feedback.textContent = "";
            }

            // 控制“上一题”按钮
            prevBtn.disabled = currentQuestionIndex === 0;
        }

        // 获取用户选择的答案
        function getSelectedAnswers() {
            const inputs = document.querySelectorAll(`input[name="q${questions[currentQuestionIndex].id}"]:checked`);
            return Array.from(inputs).map(input => input.value);
        }

        // 检查答案
        function checkAnswer() {
            const selected = getSelectedAnswers();
            if (selected.length === 0) {
                feedback.textContent = "请选择至少一个选项";
                return;
            }
            const q = questions[currentQuestionIndex];
            const correct = q.answer;
            const isCorrect = q.type === 'single' ? selected[0] === correct[0] : selected.sort().join(',') === correct.sort().join(',');
            correctAnswers[currentQuestionIndex] = isCorrect;
            submitted[currentQuestionIndex] = true;
            renderQuestion();
        }

        // 显示答题报告
        function showReport() {
            quizContainer.style.display = "none";
            report.style.display = "block";
            let singleCorrect = 0;
            let singleIncorrect = 0;
            let multipleCorrect = 0;
            let multipleIncorrect = 0;
            let incorrectQuestions = [];
            questions.forEach((q, index) => {
                if (correctAnswers[index] === true) {
                    if (q.type === 'single') singleCorrect++;
                    else multipleCorrect++;
                } else {
                    if (q.type === 'single') singleIncorrect++;
                    else multipleIncorrect++;
                    incorrectQuestions.push(q.id);
                }
            });
            document.getElementById("single-correct").textContent = `单选题答对: ${singleCorrect}道`;
            document.getElementById("single-incorrect").textContent = `单选题答错: ${singleIncorrect}道`;
            document.getElementById("multiple-correct").textContent = `多选题答对: ${multipleCorrect}道`;
            document.getElementById("multiple-incorrect").textContent = `多选题答错: ${multipleIncorrect}道`;
            document.getElementById("incorrect-questions").textContent = `答错的题目: ${incorrectQuestions.join(", ")}`;
        }

        // 事件监听
        prevBtn.addEventListener("click", () => {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                renderQuestion();
            }
        });

        actionBtn.addEventListener("click", () => {
            if (actionBtn.textContent === "提交") {
                checkAnswer();
            } else if (actionBtn.textContent === "下一道") {
                if (currentQuestionIndex < questions.length - 1) {
                    currentQuestionIndex++;
                    renderQuestion();
                } else {
                    showReport();
                }
            }
        });

        // 监听选项变化并记录用户答案
        questionContainer.addEventListener("change", () => {
            const selected = getSelectedAnswers();
            userAnswers[currentQuestionIndex] = selected;
        });

        // 初始化
        renderQuestion();
    </script>
</body>
</html>